import React, { useState } from 'react'
import { Layout, Menu, Dropdown, Space, Avatar } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined
} from '@ant-design/icons';
import { withRouter } from 'react-router-dom';

const { Header } = Layout;

function TopHeader(props) {
    const [collapsed, setCollapsed] = useState(false);
    const {username,role:{roleName}}=JSON.parse(localStorage.getItem("token"))
    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: roleName,
                },
                {
                    key: '2',
                    danger: true,
                    label: '退出',
                    onClick:()=>{
                        localStorage.removeItem("token");
                        props.history.replace("/login")
                    }
                },
            ]}
        />
    );
    return (
        <Header className="site-layout-background" style={{ padding: '0 16px' }}>
            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: () => {
                    setCollapsed(!collapsed)
                    props.collapsed()
                },
            })}

            <div style={{ float: 'right' }}>
                <span>欢迎<span style={{color:'#3094ff'}}>{username}</span>回来</span>
                <Dropdown overlay={menu}>
                    <Space>
                        <Avatar size={44} icon={<UserOutlined />} />
                    </Space>
                </Dropdown>
            </div>
        </Header>
    )
}

export default withRouter(TopHeader)